<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>我的停车券</title>
    <link rel="stylesheet" href="${ctx}/static/plug/frozenui-1.3.0/css/frozen.css" media="all">
    <link rel="stylesheet" href="${ctx}/static/css/user/register.css" media="all">
    <script src="${ctx}/static/js/laydate/laydate.js"></script>
    <style type="text/css">
        .content {
            padding-top: 10px;
            padding-left: 20px;
            padding-right: 20px
        }

        .div-content {
            width: 100%;
            height: 80px;
            margin-top: 10px;
            padding-bottom: 5px;
            padding-top: 10px;
            background-color: #f39800;
            color: white;
            border-radius: 3px;
        }
        .div-used-content {
            width: 100%;
            height: 80px;
            margin-top: 10px;
            padding-bottom: 5px;
            padding-top: 10px;
            background-color: #989898;
            color: white;
            border-radius: 3px;
        }
        .select-li {
            border-radius: 0px;
            border: 1px solid #469fe3
        }

        .select-date {
            border-radius: 0px;
            border: 1px solid #469fe3
        }

        .div-noUnpay {
            margin: 0px auto;
            text-align: center;
            color: #898989;
            padding-top: 10px;
            width: 100%
        }
    </style>
</head>
<body>
<section class="ui-container" style="margin-top: 0px;">
    <div class="ui-tab" id="div-tab">
        <ul class="ui-tab-nav ui-border-b">
            <li data-div="ulUnUsedCoupons" class="current">未使用</li>
            <li data-div="ulUsedCoupons">已使用</li>
            <li data-div="ulExpiredCoupons">已失效</li>
        </ul>
        <ul class="ui-tab-content" style="width: 200%">

            <li>
                <ul class="ui-list ui-list-pure ui-border-tb" id="ulUnUsedCoupons" nowPage="1" type="1"
                    tmpl="ulUnUsedCouponsTmpl">
                    <c:if test="${unUsedCoupons != null &&  fn:length(unUsedCoupons) > 0 }">
                        <c:forEach var="userCoupon" items="${unUsedCoupons}">
                            <li class="ui-border-t">
                                <div class="div-content">

                                    <p class="ui-txt-white" style="font-size: 15px;" align="center">${userCoupon.parkingLotCustomer.name}—${userCoupon.parkingShop.name}商家</p>

                                    <ul class="ui-row-flex">
                                        <li class="ui-col">
                                            <div class=""
                                                 style="padding-top: 0px; padding-bottom: 10px; padding-left: 10px; width: 100%">
                                                <h2 style="font-size: 25px;">
                                                <c:if test="${userCoupon.couponMoneyType == 1}">
                       								 ￥<fmt:formatNumber type="number" value="${userCoupon.money/10 }"   pattern="0.00" maxFractionDigits="2"/>
                       							 </c:if>
						                         <c:if test="${userCoupon.couponMoneyType == 2}">
						                       	免费停车券
						                       	 </c:if>
                                                </h2>

                                            </div>
                                        </li>
                                        <li class="ui-col ui-col-3" style="padding-right: 15px" align="right">
                                            <h1 class="ui-txt-white" style="font-size: 12px;padding-top:15px;" align="right"><fmt:formatDate value="${userCoupon.validDate}" pattern="yyyy-MM-dd HH:mm"/>之前有效</h1>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </c:forEach>
                    </c:if>

                    <c:if test="${unUsedCoupons == null ||  fn:length(unUsedCoupons) == 0 }">
                        <div class="ui-flex ui-flex-ver ui-flex-pack-center ui-flex-align-start"
                             style="height: 450px; overflow: auto; background-color: #f8f8f8">
                            <div id="noUnUsedCouponsDiv" class="div-noUnpay">
                                <div>
                                    <img alt="" src="${ctx}/static/image/recharge/nodata.png" width="150px">
                                </div>
                                <div class="div-text" style="padding-top: 20px">无有效停车券记录</div>
                            </div>
                        </div>
                    </c:if>
                </ul>
            </li>

            <li>
                <ul class="ui-list ui-list-pure ui-border-tb" id="ulUsedCoupons" nowPage="1" type="1"
                    tmpl="cashRevenueTmpl">
                    <c:if test="${usedCoupons != null &&  fn:length(usedCoupons) > 0 }">
                        <c:forEach var="userCoupon" items="${usedCoupons}">
                        <li class="ui-border-t">
                            <div class="div-used-content">
                                <img src="${ctx}/static/image/user/used-coupon.png" align="right" style="padding-right: 10px;padding-bottom: -20px" width="50px" height="50px">
                                <p class="ui-txt-white" style="font-size: 15px;" align="center">仅限${userCoupon.parkingLotCustomer.name}</p>
                                <ul class="ui-row-flex">
                                    <li class="ui-col">
                                        <div class=""
                                             style="padding-top: 0px; padding-bottom: 10px; padding-left: 10px; width: 100%">
                                            <h1 style="font-size: 25px;margin-top:-15px">
                                            <c:if test="${userCoupon.couponMoneyType == 1}">
					                        ￥<fmt:formatNumber type="number" value="${userCoupon.money/10 }"   pattern="0.00" maxFractionDigits="2"/>
					                        </c:if>
					                         <c:if test="${userCoupon.couponMoneyType == 2}">
					                       	免费停车券
					                        </c:if>
                                            </h1>
                                        </div>
                                    </li>
                                    <li class="ui-col ui-col-3" style="padding-right: 15px" align="right">
                                        <h1 class="ui-txt-white" style="font-size: 12px;padding-top:2px;" align="right"><fmt:formatDate value="${userCoupon.validDate}" pattern="yyyy-MM-dd HH:mm"/>之前有效,在<fmt:formatDate value="${userCoupon.updateTime}" pattern="yyyy-MM-dd HH:mm"/>时使用</h1>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        </c:forEach>
                    </c:if>

                    <c:if test="${usedCoupons == null ||  fn:length(usedCoupons) == 0 }">
                        <div class="ui-flex ui-flex-ver ui-flex-pack-center ui-flex-align-start"
                             style="height: 450px; overflow: auto; background-color: #f8f8f8">
                            <div id="noUsedCouponsDiv" class="div-noUnpay">
                                <div>
                                    <img alt="" src="${ctx}/static/image/recharge/nodata.png" width="150px">
                                </div>
                                <div class="div-text" style="padding-top: 20px">无使用停车券记录</div>
                            </div>
                        </div>
                    </c:if>
                </ul>
            </li>

            <li>
                <ul class="ui-list ui-list-pure ui-border-tb" id="ulExpiredCoupons" nowPage="1" type="2"
                    tmpl="platformRevenueTmpl">
                    <c:if test="${expiredCoupons != null &&  fn:length(expiredCoupons) > 0 }">
                        <c:forEach var="userCoupon" items="${expiredCoupons}">
                            <li class="ui-border-t">
                                <div class="div-used-content">
                                    <img src="${ctx}/static/image/user/expired-coupon.png" align="right" style="padding-right: 10px;padding-bottom: -20px" width="50px" height="50px">
                                    <p class="ui-txt-white" style="font-size: 15px;" align="center">仅限${userCoupon.parkingLotCustomer.name}</p>
                                    <ul class="ui-row-flex">
                                        <li class="ui-col">
                                            <div class=""
                                                 style="padding-top: 0px; padding-bottom: 10px; padding-left: 10px; width: 100%">
                                                <h1 style="font-size: 25px;margin-top:-15px">
                                                <c:if test="${userCoupon.couponMoneyType == 1}">
						                        ￥<fmt:formatNumber type="number" value="${userCoupon.money/10 }"   pattern="0.00" maxFractionDigits="2"/>
						                        </c:if>
						                         <c:if test="${userCoupon.couponMoneyType == 2}">
						                       	免费停车券
						                        </c:if>
                                                </h1>
                                            </div>
                                        </li>
                                        <li class="ui-col ui-col-3" style="padding-right: 15px" align="right">
                                            <h1 class="ui-txt-white" style="font-size: 12px;padding-top:2px;" align="right"><fmt:formatDate value="${userCoupon.validDate}" pattern="yyyy-MM-dd HH:mm"/>之前有效</h1>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </c:forEach>
                    </c:if>

                    <c:if test="${expiredCoupons == null ||  fn:length(expiredCoupons) == 0 }">
                        <div class="ui-flex ui-flex-ver ui-flex-pack-center ui-flex-align-start"
                             style="height: 450; overflow: auto; background-color: #f8f8f8">
                            <div id="noExpiredCouponsDiv" class="div-noUnpay">
                                <div>
                                    <img alt="" src="${ctx}/static/image/recharge/nodata.png" width="150px">
                                </div>
                                <div class="div-text" style="padding-top: 20px">无失效停车券记录</div>
                            </div>
                        </div>
                    </c:if>

                </ul>
            </li>


        </ul>
    </div>
</section>
</body>
<script src="${ctx}/static/plug/frozenui-1.3.0/lib/zepto.min.js"></script>
<script src="${ctx}/static/plug/frozenui-1.3.0/js/frozen.js"></script>
<script>


    $(function () {

        var tab = new fz.Scroll('.ui-tab', {
            role: 'tab',
            autoplay: false,
            interval: 3000
        });
        /* 滑动开始前 */
        tab.on('beforeScrollStart', function (from, to) {
            //console.log(from, to);
        })
        /* 滑动结束 */
        tab.on('scrollEnd', function (curPage) {
            //console.log(curPage);
            changeDate();
        });
    });


</script>
</html>
